<template>
  <div class="container_box">
    <div class="post_box">
      <el-card class="box-card">
        <el-page-header @back="goBack" content="详情页面">
        </el-page-header>
        <!-- 帖子信息 -->
        <div class="post_overview_main">
          <!-- 帖子标题 -->
          <h1 class="post_title">{{PostData.title}}</h1>
          <!-- 帖子作者信息 -->
          <div class="post_info">
            <span class="post_author_info"><span class="post_info_username post_info_meta">{{PostData.username}}
              </span></span>
            <em id="create_time" class="post_time post_info_meta">{{PostData.create_time | dateFormat}}</em>
            <div class="post_discuss_num post_info_meta"><span>999</span><span class="post_info_meta_inner_text">浏览</span></div>
            <div class="post_discuss_num post_info_meta"><span>999</span><span class="post_info_meta_inner_text">评论</span></div>
          </div>
        </div>
        <!-- 帖子内容简介 -->
        <div class="article_intro_container">
          <p>{{PostData.briefInfo}}</p>
        </div>
        <!-- 帖子内容 -->
        <div v-html="PostData.content">{{PostData.content}}</div>
        <!-- 帖子其他信息 -->
        <div class="post_extra_info">
          <div class="updatetime">最后一次编辑于&nbsp;&nbsp;<span id="update_time">{{PostData.create_time | dateFormat }}</span></div>
          <div class="article_footer">
            <div class="post_area">
              <!-- 点赞收藏操作 -->
              <div class="post_area_left">
                <a class="post_like_btn " style="cursor: pointer;" @click="Addlike()">
                  <div class="post_like_btn_inner">
                    <el-image fit="cover" :src="likeSrc" class="like_icon"></el-image>点赞
                    <span>{{PostData.like}}</span>
                  </div>
                </a>
                <a class="post_like_btn " style="cursor: pointer;" @click="AddCollection()">
                  <div class="post_collection_btn_inner">
                    <el-image fit="cover" :src="collectionSrc" class="collection_icon"></el-image>{{iscollection}}
                    <span>{{PostData.collections}}</span>
                  </div>
                </a>
              </div>
              <!-- 评论操作 -->
              <div class="post_area_right" @click="backBottom()">
                <a class="post_comment">
                  <el-image fit="cover" :src="discussSrc" class="discuss_icon"></el-image><span class="post_wording">评论</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="discuss-card" style="margin-top: 33px">
        <!-- 评论区头部设置 -->
        <div class="anwser_hd">
          <p class="anwser_title">热门评论</p>
        </div>
        <!-- 评论区 -->
        <div class="anwsers_list">
          <ul v-for="item in discussData" :key="item._id">
            <li>
              <!-- 一级评论的用户头像 -->
              <div class="user_avatar">
                <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
              </div>
              <div class="anwsers_container">
                <div class="username">
                  <span>{{item.username}}</span>
                  <div class="checking_state_new" v-if="item.isOriginalPoster"><span class="lz_new">楼</span></div>
                </div>
                <!-- 评论内容 -->
                <p class="discuss_text" v-html="item.content">{{item.content}}</p>
                <!-- 一级评论区域 -->
                <div class="info">
                  <span class="time">3小时前</span>
                  <div class="info_right">
                    <div class="comment_like">
                      <div class="comment_topic_like" @click="AddCommentsLike(item.id)">
                        <i class="icon_post_opr icon_topic_unagree"></i>
                        赞同
                        <span>{{item.like}}</span>
                      </div>
                    </div>
                    <div class="comment_discuss" @click="showReply(item.username, item)">
                      <el-image fit="cover" :src="discussSrc" class="discuss_icon"></el-image>
                    </div>
                  </div>
                </div>
                <!-- 二级评论区域 -->
                <div class="post_comment_reply_area">
                  <div class="post_comment_reply">
                    <!-- 二级评论内容 -->
                    <ul class="post_comment_list" v-for="subItem in item.children" :key="subItem.id">
                      <div class="reply_user_avatar" v-show="show_sub_discuss">
                        <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                      </div>
                      <li class="sub_li" v-show="show_sub_discuss">
                        <div class="sub_username">
                          <span>{{subItem.username}}</span>
                          <div class="checking_state_new" v-if="subItem.isOriginalPoster"><span class="lz_new">楼</span></div>
                          <span v-show="subItem.showReplyText">回复{{subItem.replyUsername}}</span>
                        </div>
                        <p class="sub_discuss_text">{{subItem.content}}</p>
                        <div class="sub_comment_info">
                          <div class="sub_comment_info_time">22分钟前</div>
                          <div class="sub_comment_info_discuss" @click="showSecondReplyBox(subItem.username, item)">
                            <i class="el-icon-chat-round"></i>
                          </div>
                        </div>
                      </li>
                    </ul>
                    <div @click="seeMore()" v-show="more_discuss" class="more_reply_discuss">
                      <a>查看更多</a>
                    </div>
                    <div @click="noMore()" v-show="little_discuss" class="little_reply_discuss">
                      <a>收起</a>
                    </div>
                    <!-- 回复帖子信息盒子 -->
                    <div class="comment_reply_box" v-show="item.isShowReply">
                      <img src="https://wx.qlogo.cn/mmhead/r48cSSlr7jh65ktec8hibf0X9DS0bFbnJF0WH5ic5iaYHtHtB6CAJb6uQ/64" class="comment_reply_avatar">
                      <div class="comment_reply_body">
                        <div class="reply_area" v-show="showFirstReply">
                          <el-input class="el-input" v-model="item.inputValue" clearable maxlength="100" show-word-limit :placeholder="input_placeholder"></el-input>
                          <el-button type="success" size="mini" @click="replyDiscuss(item.inputValue)">回复</el-button>
                        </div>
                        <div class="reply_area" v-show="showSecondReply">
                          <el-input class="el-input" v-model="item.inputValue" clearable maxlength="100" show-word-limit :placeholder="input_placeholder"></el-input>
                          <el-button type="success" size="mini" @click="replySecondDiscuss(item.inputValue,item.username)">回复</el-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <el-divider></el-divider>
              </div>
            </li>
          </ul>
        </div>
        <!-- 发帖对话框 -->
        <div style="width: 87%;margin: 0 auto">
          <quill-editor v-model="discussContent" :options="editorOption" ref="myQuillEditor">
          </quill-editor>
          <el-button @click="submitDiscuss()" type="success" size="mini" style="float: right;margin-top: 10px;margin-bottom: 40px">回复</el-button>
        </div>
      </el-card>
    </div>
    <div class="post_box_others">
      <div class="post_box_others_info">
        <div>
          <el-image style="width: 30px; height: 30px;vertical-align: middle;" :src="authorTag" fit="fit"></el-image>
          <span style="text-align: left;margin-left: 20px">作者介绍</span>
        </div>
        <div style="display: flex;margin-top: 30px;">
          <div style="margin-left: 20px">
            <img style="width: 60px; height: 60px;margin-top: 12px" :src="PostData.useravatar">
          </div>
          <div style="margin-left: 20px;">
            <p style="line-height: 0">{{PostData.username}}</p>
            <div @click="privateChat()">
              <span class="btn btn_primary" >私聊</span>
            </div>
          </div>
        </div>
        <div style="position: relative;">
          <el-tag type="success" style="position: absolute;left: 20px;margin-top: 12px">个人介绍</el-tag>
          {{PostData.introduce}}
        </div>
      </div>
      <div class="post_box_others_tag">
        <div>
          <el-image style="width: 30px; height: 30px;vertical-align: middle;" :src="postTag" fit="fit"></el-image>
          <span style="text-align: left;margin-left: 20px">文章标签</span>
          <div class="post_tags_container">
            <span class="post_tag" v-for="(tagItem) in PostData.tagArray" :key="tagItem"><span>{{tagItem}}</span></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import agreeBefore from '../../assets/agreeBefore.png'
import agreeAfter from '../../assets/agreeAfter.png'
import collectionBefore from '../../assets/collectionBefore.png'
import collectionAfter from '../../assets/collectionAfter.png'
import discuss from '../../assets/discuss.png'
import authorTag from '../../assets/authorTag.png'
import postTag from '../../assets/postTag.png'

// 富文本编辑器扩展模块
import { quillEditor, Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
import imageResize from 'quill-image-resize-module'

Quill.register('modules/ImageExtend', ImageExtend)
// use resize module
Quill.register('modules/imageResize', imageResize)
export default {
  components: { quillEditor },
  data() {
    return {
      squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      more_discuss: true,
      little_discuss: false,
      show_sub_discuss: false,
      showFirstReply: false,
      showSecondReply: false,
      ShowReplyText: false,
      replyUsername: '',
      PostData: this.$store.state.PostData,
      likeSrc: agreeBefore,
      collectionSrc: collectionBefore,
      discussSrc: discuss,
      authorTag: authorTag,
      postTag: postTag,
      iscollection: '收藏',
      input_placeholder: '',
      discussContent: '',
      discussData: [],
      // 富文本框参数设置
      editorOption: {
        modules: {
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white'
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar']
          },
          ImageExtend: {
            loading: true,
            name: 'img',
            size: 2,
            action: 'http://localhost:3000/community/posting/uploadImg',
            response: (res) => {
              return res.result.imageUrl
            }
          },
          toolbar: { // 如果不上传图片到服务器，不必配置
            container: container, // container为工具栏，此次引入全部工具栏
            handlers: {
              image: function() {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      }
    }
  },
  created() {
    const token = window.localStorage.getItem('token')
    if (token) {
      this.optionsIsLike()
      this.optionsIsCollection()
    }
    this.getAllDiscuss()
  },
  methods: {
    privateChat() {
      const h = this.$createElement
      this.$notify({
        title: '私聊功能模块',
        message: h('i', { style: 'color: teal' }, '还没完善功能,见谅！')
      })
    },
    backBottom() {
      document.getElementById('community_el_main').scrollTop = document.getElementById('community_el_main').scrollHeight
    },
    seeMore() {
      this.show_sub_discuss = true
      this.more_discuss = false
      this.little_discuss = true
    },
    noMore() {
      this.show_sub_discuss = false
      this.more_discuss = true
      this.little_discuss = false
    },
    goBack() {
      this.$router.go(-1)
    },
    // 处理点赞功能
    async Addlike() {
      const token = window.localStorage.getItem('token')
      if (!token) {
        this.$message({
          message: '游客状态不允许点赞',
          type: 'error'
        })
      } else {
        // 点赞前判断用户是否对打开的文章点过赞
        const queryInfo = { post_id: this.$store.state.PostData.id }
        const ret = await this.$http.get('/community/post/like', { params: queryInfo })
        console.log(ret.data)
        if (ret.data.err_code === 0) {
          this.$message({
            message: '点赞成功',
            type: 'success'
          })
          this.likeSrc = agreeAfter
          this.$store.commit({
            type: 'Addlike'
          })
          this.updateLike()
        } else if (ret.data.err_code === -1) {
          this.$message({
            message: '你已经点过赞了,把机会留给别人吧',
            type: 'error'
          })
        } else {
          this.$message({
            message: '点赞失败',
            type: 'error'
          })
        }
      }
    },
    // 判断登陆的用户是否对打开的文章点赞
    async optionsIsLike() {
      const queryInfo = { post_id: this.$store.state.PostData.id }
      const ret = await this.$http.get('/community/post/islike', { params: queryInfo })
      console.log(ret.data)
      if (ret.data.err_code === 0) {
        this.likeSrc = agreeAfter
      }
    },
    async AddCollection() {
      const queryInfo = { post_id: this.$store.state.PostData.id }
      const token = window.localStorage.getItem('token')
      if (!token) {
        this.$message({
          message: '游客状态不允许收藏文章',
          type: 'error'
        })
      } else {
        if (this.iscollection === '收藏') {
          const ret = await this.$http.get('/community/post/addCollection', { params: queryInfo })
          console.log(ret.data)
          if (ret.data.err_code === 0) {
            this.$message({
              message: '收藏成功',
              type: 'success'
            })
            // 收藏成功则文章的collections加一
            this.incrementCollection()
            this.collectionSrc = collectionAfter
            this.iscollection = '取消收藏'
            this.$store.commit({
              type: 'Addcollection'
            })
          } else if (ret.data.err_code === -1) {
            this.$message({
              message: '你已经收藏过此文章了!',
              type: 'warning'
            })
          } else {
            this.$message({
              message: '收藏失败',
              type: 'error'
            })
          }
        } else {
          // 取消收藏
          const ret = await this.$http.get('/community/post/deleteCollection', { params: queryInfo })
          console.log(ret.data)
          if (ret.data.err_code !== 0) {
            this.$message({
              message: '取消收藏操作失败',
              type: 'error'
            })
          }
          this.collectionSrc = collectionBefore
          this.$message({
            message: '取消收藏成功',
            type: 'success'
          })
          this.iscollection = '收藏'
          this.$store.commit({
            type: 'Delcollection'
          })
          this.decrementCollection()
        }
      }
    },
    // 判断登陆的用户是否收藏打开的文章
    async optionsIsCollection() {
      const queryInfo = { post_id: this.$store.state.PostData.id }
      const ret = await this.$http.get('/community/post/isCollection', { params: queryInfo })
      if (ret.data.err_code === 0) {
        this.collectionSrc = collectionAfter
        this.iscollection = '取消收藏'
      }
    },
    // 把posting表的like数据更新
    async updateLike() {
      const queryInfo = { _id: this.$store.state.PostData._id }
      const likeRet = await this.$http.get('/community/post/addlike', { params: queryInfo })
      console.log(likeRet.data)
    },
    // 把posting表的collections数据更新+1
    async incrementCollection() {
      const queryInfo = { _id: this.$store.state.PostData._id }
      const PostRet = await this.$http.get('/community/post/incrementCollection', { params: queryInfo })
      console.log(PostRet.data)
    },
    // 把posting表的collections数据更新-1
    async decrementCollection() {
      const queryInfo = { _id: this.$store.state.PostData._id }
      const PostRet = await this.$http.get('/community/post/decrementCollection', { params: queryInfo })
      console.log(PostRet.data)
    },
    // 提交评论内容
    async submitDiscuss() {
      const token = window.localStorage.getItem('token')
      if (this.discussContent === '') {
        this.$message({
          message: '评论内容不能为空',
          type: 'error'
        })
      } else {
        if (!token) {
          this.$message({
            message: '游客状态不允许评论,请先登陆',
            type: 'error'
          })
        } else {
          const queryInfo = { _id: this.$store.state.PostData._id, content: this.discussContent }
          const ret = await this.$http.get('/community/postRead/discuss', { params: queryInfo })
          console.log(ret.data)
          if (ret.data.err_code !== 0) {
            this.$message({
              message: '评论失败',
              type: 'error'
            })
          }
          this.$message({
            message: '评论成功',
            type: 'success'
          })
          this.discussContent = ''
          this.getAllDiscuss()
        }
      }
    },
    // 获取所有评论
    async getAllDiscuss() {
      const queryInfo = { _id: this.$store.state.PostData._id }
      const ret = await this.$http.get('/community/postRead/getAllDiscuss', { params: queryInfo })
      if (ret.data.err_code !== 0) {
        this.$message({
          message: '获取评论失败',
          type: 'error'
        })
      }
      this.discussData = ret.data.data
      this.discussData.forEach(item => {
        this.$set(item, 'isShowReply', false)
        this.$set(item, 'inputValue', '')
      })
    },
    // 展示一级评论回复框
    showReply(username, item) {
      item.isShowReply = true
      this.showFirstReply = true
      this.showSecondReply = false
      this.input_placeholder = '回复' + username
      this.replyUsername = username
    },
    // 展示二级评论回复框
    showSecondReplyBox(username, item) {
      item.isShowReply = true
      this.showFirstReply = false
      this.showSecondReply = true
      this.input_placeholder = '回复' + username
      this.replyUsername = username
    },
    // 回复一级评论
    async replyDiscuss(inputValue) {
      const token = window.localStorage.getItem('token')
      if (inputValue === '') {
        this.$message({
          message: '评论内容不能为空',
          type: 'error'
        })
      } else {
        if (!token) {
          this.$message({
            message: '游客状态不允许评论,请先登陆',
            type: 'error'
          })
        } else {
          const queryInfo = {
            _id: this.$store.state.PostData._id,
            replyUsername: this.replyUsername,
            content: inputValue
          }
          const ret = await this.$http.get('/community/postRead/replyDiscuss', { params: queryInfo })
          console.log(ret.data)
          if (ret.data.err_code !== 0) {
            this.$message({
              message: '评论失败',
              type: 'error'
            })
          }
          this.$message({
            message: '评论成功',
            type: 'success'
          })
          this.getAllDiscuss()
        }
      }
    },
    // 回复二级评论
    async replySecondDiscuss(inputValue, FirstUsername) {
      const token = window.localStorage.getItem('token')
      if (inputValue === '') {
        this.$message({
          message: '评论内容不能为空',
          type: 'error'
        })
      } else {
        if (!token) {
          this.$message({
            message: '游客状态不允许评论,请先登陆',
            type: 'error'
          })
        } else {
          const queryInfo = {
            _id: this.$store.state.PostData._id,
            replyUsername: this.replyUsername,
            content: inputValue,
            FirstUsername: FirstUsername
          }
          const ret = await this.$http.get('/community/postRead/replySecondDiscuss', { params: queryInfo })
          console.log(ret.data)
          if (ret.data.err_code !== 0) {
            this.$message({
              message: '评论失败',
              type: 'error'
            })
          }
          this.$message({
            message: '评论成功',
            type: 'success'
          })
          this.getAllDiscuss()
        }
      }
    },
    // 评论点赞功能
    async AddCommentsLike(commentsId) {
      const token = window.localStorage.getItem('token')
      if (!token) {
        this.$message({
          message: '游客状态不允许点赞',
          type: 'error'
        })
      } else {
        // 点赞前判断用户是否对打开的评论点过赞
        const queryInfo = { commentsId: commentsId }
        const ret = await this.$http.get('/community/post/CommentsLike', { params: queryInfo })
        console.log(ret.data)
        if (ret.data.err_code === 0) {
          this.$message({
            message: '评论点赞成功',
            type: 'success'
          })
          this.UpdateDiscussLike(commentsId)
        } else if (ret.data.err_code === -1) {
          this.$message({
            message: '你已经点过赞了,把机会留给别人吧',
            type: 'error'
          })
        } else {
          this.$message({
            message: '点赞失败',
            type: 'error'
          })
        }
      }
    },
    // 评论点赞数加一
    async UpdateDiscussLike(commentsId) {
      const queryInfo = { _id: this.$store.state.PostData._id, commentsId: commentsId }
      const DiscussRet = await this.$http.get('/community/post/AddDiscussLike', { params: queryInfo })
      console.log(DiscussRet.data)
      this.getAllDiscuss()
    }
  }
}

</script>
<style scoped>
.post_tags_container {
  margin-top: 8px;
}

.post_tag {
  padding: 0 8px;
  margin-bottom: 0;
  color: rgba(0, 0, 0, .5);
  vertical-align: top;
  line-height: 35px;
  height: 35px;
  margin-right: 4px;
  border-radius: 2px;
  font-size: 12px;
  display: inline-block;
  cursor: default;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ededed;
}

.btn {
  display: inline-block;
  overflow: visible;
  padding: 0 22px;
  height: 30px;
  line-height: 28px;
  *line-height: 28px;
  vertical-align: middle;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  border-radius: 4px;
  height: 32px;
  line-height: 32px;
}

.btn_primary {
  min-width: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 22px;
  background-color: #07c160;
  color: #fff;
  border: none;
  font-weight: 500;
  background: #07c160;
}

.container_box {
  width: 80%;
  margin: 0 auto;
  height: 100vh;
}

.post_box {
  width: calc(100% - 320px);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: left;
  border-radius: 4px;
  margin-bottom: 16px;
  height: 400px;
  margin-top: 50px
}

.post_box_others_info {
  background-color: #fff;
  width: 300px;
  height: 300px;
  margin-bottom: 16px;
}

.post_box_others_tag {
  background-color: #fff;
  width: 300px;
  height: 200px;
  margin-bottom: 16px;
}

.post_box_others {
  display: inline-block;
  width: 300px;
  height: 800px;
  margin-left: 20px;
  border-radius: 4px;
  margin-top: 50px;
}

.little_reply_discuss:after {
  content: " ";
  display: inline-block;
  vertical-align: 2px;
  width: 7px;
  height: 7px;
  border-left: 1px solid #409eff;
  border-bottom: 1px solid #409eff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(134deg);
  margin: 0 .8em 0 9px;
  position: relative;
  top: 2px;
}

.little_reply_discuss {
  overflow: hidden;
  margin-top: 10px;
  color: #409eff;
  cursor: pointer;
  text-align: center;
}

.more_reply_discuss:after {
  content: " ";
  display: inline-block;
  vertical-align: 2px;
  width: 7px;
  height: 7px;
  border-left: 1px solid rgba(0, 0, 0, .5);
  border-bottom: 1px solid rgba(0, 0, 0, .5);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  margin: 0 .8em 0 9px;
  position: relative;
  top: -2px;
  top: -1px;
}

.more_reply_discuss {
  overflow: hidden;
  margin-top: 10px;
  color: rgba(0, 0, 0, .5);
  cursor: pointer;
}

.reply_user_avatar {
  float: left;
  margin: 12px 0 0 0;
  position: relative;
}

.reply_user_avatar img {
  border: 0;
  border-radius: 0;
  width: 33px;
  height: 33px;
  vertical-align: middle;
}

.sub_li {
  border-bottom: .3px solid rgba(0, 0, 0, .1);
  margin-bottom: 15px;
}

.el-divider--horizontal {
  display: block;
  height: .9px;
  width: 100%;
  margin: 24px 0;
}

.reply_area {
  justify-content: space-between;
  display: flex;
}

.el-input {
  width: 77%;
  left: 3px;
  color: rgba(0, 0, 0, .3);
}

.reply_input {
  padding: 0;
  margin: 0;
  height: auto;
  max-height: none;
  min-height: 0;
}

.comment_reply_box .comment_reply_body {
  margin-left: 32px;
}

.widget_comment img {
  max-height: 400px;
}

.comment_reply_box .comment_reply_avatar {
  position: relative;
  top: 6px;
  width: 28px;
  height: 28px;
  border-radius: 2px;
  display: inline-block;
  float: left;
}

.comment_reply_box {
  border-radius: 4px;
  padding: 12px;
  background-color: #f5f5f5;
  height: 38px
}

.icon_agree {
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  background: transparent url(https://res.wx.qq.com/community/dist/images/awesome_up_icon_e1f909.svg) no-repeat 0 0;
  background-size: cover;
  margin-right: 5px;
  vertical-align: middle;
  top: -2px;
  opacity: .5;
}

.sub_comment_info_right_like {
  color: rgba(0, 0, 0, .5);
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
}

.sub_comment_info_discuss {
  color: rgba(0, 0, 0, .5);
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
  margin-top: -10px;
}

.sub_comment_info_time {
  display: inline-block;
  line-height: 30px;
  font-size: 14px;
  color: rgba(0, 0, 0, .3);
  margin-top: -8px;
  margin-left: 5px;
}

.sub_comment_info {
  margin-top: 2px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  overflow: hidden;
  color: rgba(0, 0, 0, .5);
}

.checking_state_new .lz_new {
  background-color: #fa9d3b;
  width: 16px;
  height: 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  border-radius: 2px;
  color: #fff;
  margin-right: 4px;
  margin-left: 0;
  display: inline-block;
  line-height: 14px;
  text-align: center;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.checking_state_new {
  margin: 0 0 0 4px;
  display: inline-block;
  font-size: 12px;
}

.sub_li p {
  margin-top: -13px
}

.sub_li {
  padding-top: 11px;
  padding-bottom: 11px;
  padding-left: 0;
}

.sub_username {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  color: #576b95;
  font-size: 13px
}

.post_comment_list {
  margin-top: -16px;
  border-top: none;
}

.post_comment_reply .sub_username {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post_comment_reply_area:before {
  position: absolute;
  top: 0;
  margin-top: -18px;
  left: 16px;
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-bottom-color: #f7f7f7;
}

.post_comment_reply_area {
  position: relative;
  margin-top: 15px;
  padding: 12px 12px 15px;
  border-radius: 4px;
  background-color: #fafafa;
}

.icon_topic_unagree {
  display: inline-block;
  width: 10px;
  height: 9px;
  background: transparent url(https://res.wx.qq.com/community/dist/images/topic_unagree_daad9a.svg) no-repeat 0 0;
  background-size: contain;
  margin-top: -1px;
}

.icon_post_opr {
  width: 15px;
  height: 15px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -.2em;
  margin-right: 5px;
  font-size: 13px;
}

.comment_like .comment_topic_like {
  display: inline-block;
  line-height: 30px;
  padding: 0 10px;
  background: #f5f5f5;
  border-radius: 4px;
  color: #576b95;
}

.info_right .comment_like {
  color: rgba(0, 0, 0, .5);
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
}

.info_right .comment_discuss {
  color: rgba(0, 0, 0, .5);
  display: inline-block;
  margin-right: 17px;
  cursor: pointer;
}

.info .info_right {
  text-align: right;
}

.info .time {
  display: inline-block;
  line-height: 28px;
  font-size: 14px;
  color: rgba(0, 0, 0, .3);
}

.info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 3px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.anwsers_container .discuss_text {
  line-height: 20px;
  padding: 2px 0;
  font-size: 14px;
  text-shadow: none;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-word;
  margin: 0
}

.anwsers_container .username {
  vertical-align: middle;
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
  padding-bottom: 4px;
  display: block;
  word-wrap: break-word;
  color: #576b95;
  margin-top: 10px;
}

.anwsers_container {
  position: relative;
  margin-left: 60px;
  padding: 13px 0 14px;
}

.user_avatar img {
  border: 0;
  border-radius: 0;
  width: 43px;
  height: 43px;
  vertical-align: middle;
}

.user_avatar {
  float: left;
  margin: 24px 0 0 5px;
  position: relative;
}

.discuss_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -.2em;
  margin-right: 5px;
}

.discuss_icon {
  opacity: .5;
  background-size: cover;
}

.post_comment {
  margin-left: 24px;
  margin-right: 0;
  color: rgba(0, 0, 0, .5);
  display: inline-block;
  cursor: pointer;
}

.like_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -.2em;
  margin-right: 5px;
  opacity: .5;
}

.collection_icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -.2em;
  margin-right: 5px;
  opacity: .5;
}

.post_like_btn_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.post_collection_btn_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
}

.post_like_btn {
  display: inline-block;
  height: 32px;
  border-radius: 2px;
  background-color: #f2f2f2;
  padding: 0 12px;
  margin-right: 10px;
}

.post_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100%;
  text-align: right;
}

.article_footer {
  position: relative;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  float: none;
  margin-top: 25px;
}

.post_extra_info {
  font-size: 15px;
  margin: 2em 0 0;
  color: rgba(0, 0, 0, .5);
}

.article_intro_container:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -30px;
  content: " ";
  display: inline-block;
  width: 60px;
  height: 2px;
  background-color: rgba(0, 0, 0, .1);
}

.article_intro_container {
  width: 448px;
  position: relative;
  text-align: center;
  margin: 0 auto 37px;
  font-size: 16px;
  padding: 35px 25px 42px;
  color: rgba(0, 0, 0, .5);
}

.post_info_meta_inner_text {
  margin-left: 5px;
}

.post_discuss_num {
  float: none;
}

.post_info_username {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
}

.post_author_info {
  position: relative;
  text-align: left;
  color: #1749b2;
}

.post_info_meta {
  display: inline-block;
  vertical-align: top;
  padding-right: 15px;
  font-weight: 400;
  font-style: normal;
}

.post_author_info:before {
  position: relative;
  top: -2px;
  content: " ";
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: middle;
  margin-right: 3px;
  background: url(https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png) no-repeat 50%;
  background-size: cover;
}

.post_info {
  *zoom: 1;
  color: rgba(0, 0, 0, .3);
  font-size: 14px;
  margin: 12px 0;
}

.post_overview_main {
  display: block;
  width: auto;
  text-align: center;
}

.post_overview .post_title {
  white-space: normal;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  display: block;
}

</style>
